<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, minimal-ui">
    <meta content="yes" name="apple-mobile-web-app-capable">
    <title>主页面</title>
    <link rel="stylesheet" type="text/css" href="../css/style.css">
    <link rel="stylesheet" href="//apps.bdimg.com/libs/jqueryui/1.10.4/css/jquery-ui.min.css">
    <script src="//apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script>
    <script src="//apps.bdimg.com/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
    <script src="https://g.alicdn.com/dingding/dingtalk-jsapi/2.13.42/dingtalk.open.js"></script>

    <script type="text/javascript">
        $(function(){
            $("#test").hide()
            $("#test").dialog()

            var arrayObj = new Array()
            $.ajax({
                url:"database_message",
                dataType:"json",
                type:"post",
                success:function(jsonArray){
                    var length=jsonArray.length;
                    for (var i=0;i<length;i++){
                        arrayObj.push(jsonArray[i].uname)
                    }
                    //这是为了填充input实现联想查找
                    $("#user").autocomplete({
                        source: arrayObj,
                        //定义至少输入几个字
                        minLength: 1,
                    });
                },
                error:function(XMLHttpRequest, textStatus, errorThrown){
                    debugger
                    // 状态码,状态，错误信息
                    alert(XMLHttpRequest.status+"\n"+XMLHttpRequest.readyState+"\n"+textStatus);
                    if(XMLHttpRequest.readyState==0){
                        // 对应登录超时问题，直接跳到登录页面
                        location.href='../Login.action';
                    }else{
                        $.messager.alert('提示','系统内部错误，请联系管理员处理！','info');
                    }
                }
            })

            alert("init!")
            var t, t2;
            $("#listEmail").css("top",$("#inputBox").css("top")+$("#inputBox").css("height"));
            $("#listEmail").css("left",$("#inputBox").css("left"));
            $("#listName").css("top",$("#inputBox").css("top")+$("#inputBox").css("height"));
            $("#listName").css("left",$("#inputBox").css("left"));
            hide();
            $("li").css("font-size",$("#s_custemail").css("font-size"));
            $("li").css("font-size",$("#s_custname").css("font-size"));
            $("li").css("text-align","left");
            bindInput();
            var email = $("#s_custemail");
            var name = $("#s_custname");
            $("#listEmail li").mouseup(function(e){
                if (t) {
                    clearInterval(t);
                };
                var str = $(this).text();
                setValue(email, str);
            });
            $("#listName li").mouseup(function(){
                if (t2) {
                    clearInterval(t2);
                };
                var str = $(this).text();
                setValue(name, str);
            });
            $('#listEmail li').mousemove(function(e){
                $flag1 = 1;
            });
            $('#listName li').mousemove(function(e){
                $flag2 = 1;
            });
            $("#s_custemail").focus(function(){
                $flag1 = 0;
            });
            $("#s_custname").focus(function(){
                $flag2 = 0;
            });
            $("#s_custemail").blur(function(){
                if (!$flag1) {
                    hide();
                } else {
                    t = setTimeout("hide()",300);
                }
            });
            $("#s_custname").blur(function(){
                if (!$flag2) {
                    hide();
                } else {
                    t2 = setTimeout("hide()",300);
                }
            });



            function bindInput(){
                //IE
                if (window.ActiveXObject){
                    document.getElementById('s_custemail').attachEvent("onpropertychange",show1);
                    document.getElementById('s_custname').attachEvent("onpropertychange",show2);
                }else{
                    $("#s_custemail").bind("input",show1);
                    $("#s_custname").bind("input",show2);
                }
            }

            function show1(){
                var s_value = $("#s_custemail").val();
                $("#listEmail").children().children("li").hide();
                showListEmail();
                if(s_value.length >= 1){
                    $("#listEmail").children().children("li").each(function(){
                        var tmp = $(this).text().substr(0,$(this).text().length);
                        if(tmp && s_value==tmp.substr(0,s_value.length)){
                            $(this).show();
                        }
                    });
                }
            }

            function show2(){
                var s_value = $("#s_custname").val();
                $("#listName").children().children("li").hide();
                showListName();
                if(s_value.length >= 1){
                    $("#listName").children().children("li").each(function(){
                        var tmp = $(this).text().substr(0,$(this).text().length);

                        if(tmp && s_value==tmp.substr(0,s_value.length)){
                            $(this).show();
                        }
                    });
                }
            }

            function hide(){
                $("#listEmail").css("display","none");
                $("#listName").css("display","none");
            }

            function setValue(obj, str){
                obj.val(str);
                hide();
                obj.focus();
            }

            function showListEmail(){
                var obj = $('#s_custemail');
                $("#listEmail").css("left",parseInt(obj.offset().left));
                $("#listEmail").css("top",parseInt(obj.offset().top +obj.outerHeight()));
                $("#listEmail").css('display', 'block');
            }

            function showListName(){
                var obj = $('#s_custname');
                $("#listName").css("left",parseInt(obj.offset().left));
                $("#listName").css("top", parseInt(obj.offset().top + obj.outerHeight()));
                $("#listName").css('display', 'block');
            }

            var res = ["三乔", "四乔", "二乔", "五乔", "六乔", "八乔", "赵姬", "虞美人", "卓文君", "赵飞燕", "王昭君", "貂蝉", "大乔", "二乔", "绿珠", "祝英台", "苏小小", "张丽华", "蔡文姬", "谢道韫", "甄宓", "李祖娥", "武则天", "上官婉儿", "太平公主", "孙窈娘", "杨玉环", "关盼盼", "李师师", "杜十娘", "陈圆圆", "董小婉", "柳如是", "李香君"]

            $("#part").autocomplete({
                source: res,
                //定义至少输入几个字
                minLength: 1,
                autofocus:true,
                scroll:true,
                max:5,
            });
        });
    </script>
</head>

<body>
<div id="test">
    <table>
        <tr><td></td><td></td></tr>
        <tr><td> E-mail</td><td><input id="s_custemail" name='email' value='' AutoComplete="on" size=60 maxlength=256></td></tr>
        <tr><td> 姓名</td><td><input id="s_custname" value=""  AutoComplete="on" size=60 maxlength=256></td></tr>
        <tr><td> 单位</td><td><input name='unit' value="" size=60 maxlength=256 id="part"></td></tr>
        <tr><td> 部门</td><td><input name='part' value="" size=60 maxlength=256 id="user"></td></tr>
        <tr><td> </td><td> </td></tr>
    </table>
</div>
<div id="listEmail" style="display:none">
    <ul>
        <li>liu2yi1@test.com</li>
        <li>liu2er4@test.com</li>
        <li>liu2san1@test.com</li>
        <li>chen2yi1@test.com</li>
        <li>chen2er4@test.com</li>
        <li>chen2san1@test.com</li>
        <li>zhang1yi1@test.com</li>
        <li>zhang1er4@test.com</li>
        <li>zhang1san1@test.com</li>
        <li>li3er4@test.com</li>
        <li>li3san1@test.com</li>
        <li>li3si4@test.com</li>
        <li>wang2san1@test.com</li>
        <li>wang2si4@test.com</li>
        <li>wang2wu3@test.com</li>
        <li>zhao4si4@test.com</li>
        <li>zhao4wu3@test.com</li>
        <li>zhao4wu3@test.com</li>
        <li>sun1wu3@test.com</li>
        <li>sun1liu4@test.com</li>
        <li>sun1qi1@test.com</li>
        <li>zhou1liu4@test.com</li>
        <li>zhou1qi1@test.com</li>
        <li>zhou1ba1@test.com</li>
        <li>wu2qi1@test.com</li>
        <li>wu2ba1@test.com</li>
        <li>wu2jiu3@test.com</li>
        <li>zheng4ba1@test.com</li>
        <li>zheng4jiu3@test.com</li>
        <li>zheng4shi2@test.com</li>
    </ul>
</div>
<div id="listName" style="display:none">
    <ul>
        <li>刘一</li>
        <li>刘二</li>
        <li>刘三</li>
        <li>陈一</li>
        <li>陈二</li>
        <li>陈三</li>
        <li>张一</li>
        <li>张二</li>
        <li>张三</li>
        <li>李二</li>
        <li>李三</li>
        <li>李四</li>
        <li>王三</li>
        <li>王四 </li>
        <li>王五 </li>
        <li>赵四 </li>
        <li>赵五 </li>
        <li>赵五</li>
        <li>孙五</li>
        <li>孙六 </li>
        <li>孙七</li>
        <li>周六</li>
        <li>周七  </li>
        <li>周八</li>
        <li>吴七</li>
        <li>吴八 </li>
        <li>吴九 </li>
        <li>郑八</li>
        <li>郑十</li>
    </ul>
</div>
</body>

</html>